import React, { memo, Component } from 'react'
import { getManageTable,getManageDetail,offShelf } from '@/api/user'
import {Spin, Image, Table, Button, Input, Select, message, Modal,Popconfirm } from 'antd'
import './index.css'
import { baseUrl } from '../../assets/baseUrl'
import { formatDate, getDateDiff, exportExcel } from '../../utils/tool'
// import Search from 'antd/lib/transfer/search'
const BaseUrl = baseUrl()
const { Option } = Select;
const { Search } = Input;
class thingLostManage extends Component {
  constructor(props) {
    super(props);
    this.state = {
      loading:false,
      pageSize: 8,
      pageNum: 1,
      tableList:[],
      name:'',//搜索筛选
      forWhich:'all',//.区分是寻物启事还是失物招领
      found:'',//.已找到失物/失主，未找到失物/失主，用found字段，1代表找到了，0代表没找到
      total:10,
    }
  }
  componentDidMount() {
    // getManageTable({pageSize:10,pageNum:1,numberKey:'',forWhich:'all'}).then(res=>{
    //   console.log(res);
    // })
    this.SuperList()
    getManageDetail().then(res=>{
      console.log(res);
    })
  }
  //获取表格数据
  SuperList =()=>{
    const {pageSize,pageNum,name,forWhich,found}=this.state;
    
    getManageTable({
      pageSize:pageSize,pageNum:pageNum,
      name:name,forWhich:forWhich,found:found}).then(res=>{
      // console.log(res);
      // debugger
      this.setState({tableList:res?.data?.data,
        pageNum:res?.data.pagination.pageNum,
        total:res?.data.pagination.total,
        pageSize:res?.data.pagination.pageSize,
      })

    })
  }
  //下架
  offShelfFunction =(id)=>{
    offShelf({numberId:id}).then(res=>{
      // debugger
      if(res.data.code==200)
      {
        message.success('操作成功')
        this.SuperList()
      }
      
    })
  }
  render() {
    const {tableList} = this.state
     let columns = [
    {
      title: '发布者',
      dataIndex: 'senderNickName',
      align: 'center',
      
    },
    ,
    {
      title: '发布内容',
      dataIndex: 'content',
      align: 'center',
      width: 200,
      // render: (i) => i + '年'
    },
    {
      title: '地点',
      dataIndex: 'findPlace',
      align: 'center',
      width: 100,
      // render: (i) => i + '月'
    },
    {
      title: '时间',
      dataIndex: 'findTime',
      align: 'center',
      width: 200,
      
      // render:(item,row)=>{
      //   return <TextFlow text={item} clamp={1} width={150}></TextFlow>
      // }
    },
    {
      title: '类型',
      dataIndex: 'tag',
      align: 'center',
      width: 100
    },
    {
      title: '发布时间',
      dataIndex: 'createTime',
      align: 'center',
      width: 200,
      render: (item) => {
        return item? formatDate(item) 
        // + '(' + getDateDiff(item) + ')'
        :<div>'无'</div>
      }
    },
    {
      title: 'ID',
      dataIndex: 'numberId',
      align: 'center',
      width: 200,
    },
    {
      title: '状态',
      dataIndex: 'found',
      align: 'center',
      render: (item) => {
        return item==1?<span style={{color:'green'}}>已找到失物/失主</span>:item==2?<span style={{color:'red'}}>已下架</span>
        :<span style={{color:'blue'}}>未找到失物/失主</span>
      }
    },{
      title: '发布类型',
      dataIndex: 'forPeople',
      align: 'center',
      render: (item,all) => {
        return item == 0 ? '寻物启事' :'失物招领'
      }
    },
    // {
    //   title: '作品名称',
    //   dataIndex: 'workName',
    //   align: 'center',
    // },
    // {
    //   title: '指导教师',
    //   dataIndex: 'teachers',
    //   align: 'center',
    // }
    {
      title: '操作',
      align: 'center',
      // width: 200,
      render: (a,_) => {
        return  <Popconfirm
        title="确认删除?"
        description="确认删除?"
        onConfirm={()=>{this.offShelfFunction(_.numberId)}}
        // onCancel={cancel}
        okText="确认"
        cancelText="取消"
      >
         {_.found===0?<span style={{ cursor: 'pointer', color: 'red' }}
          // onClick={()=>{this.offShelfFunction(_.numberId)}}
          >下架</span>:''}
      </Popconfirm>
       
      }
    }
  ]
    //分页器
    const pagination = {
      current: this.state.pageNum,
      pageSize: this.state.pageSize,
      onChange: (e,a) => {
        this.setState(
          {
            pageNum: e,
            pageSize:a
          },
          () => {
            this.SuperList()
          }
        )
      },
      total: this.state.total
    }
    return (
      <Spin spinning={this.state.loading} size="large">
        <div style={{height:'90vh',padding:'0 0 5vh 0',overflow:'scroll'}} className='flex'>
        <div style={{ padding: '6px 11vw' }}>
            <div style={{ display: 'flex', flexWrap: 'wrap' }}>
              <div style={{ marginRight: 24, marginTop: 24 }}>
                {/* 搜索： */}
               <Search placeholder='输入类型搜索' onSearch={(e)=>{ this.setState({name:e,pageNum:1},()=>this.SuperList())}} />
               
              </div>
              <div style={{ marginRight: 24, marginTop: 24 }}>
                帖子类型：
                <Select
                  defaultValue="全部"
                  style={{ width: 120 }}
                  onChange={(e) => {
                    this.setState(
                      {
                        forWhich: e,
                        pageNum:1
                      },
                      () => this.SuperList()
                    )
                  }}
                >
                  <Option value="all">全部</Option>
                  <Option value='forThing'>寻物</Option>
                  <Option value='forPeople'>失物招领</Option>
                </Select>
              </div>
              <div style={{ marginRight: 24, marginTop: 24 }}>
                完成情况：
                <Select
                  defaultValue="全部"
                  style={{ width: 120 }}
                  onChange={(e) => {
                    this.setState(
                      {
                        found: e,
                        pageNum:1
                      },
                      () => this.SuperList()
                    )
                  }}
                >
                  <Option value="">全部</Option>
                  <Option value='1'>已找到失物/失主</Option>
                  <Option value='0'>未找到失物/失主</Option>
                </Select>
              </div>
              {/* <div style={{ marginRight: 24, marginTop: 24 }}>
                <Button
                  onClick={this.reflashTable.bind(this, 'download')}
                  type="primary"
                >
                  导出excel
                </Button>
              </div> */}
            </div>
            <div style={{ marginTop: 12,paddingBottom:200}}>
              <Table
                columns={columns}
                dataSource={tableList}
                // onChange={this.changeTable.bind(this)}
                // locale={{
                //   cancelSort: '点击取消排序',
                //   triggerAsc: '点击升序',
                //   triggerDesc: '点击降序'
                // }}
                pagination={pagination}
              />
            </div>
          </div>
        </div>
      </Spin>
    )
  }
}
export default memo(thingLostManage)